<template>
  <div class="bgfff">
    <Options/>
    <div class="container">
      <div class="commodit-box">
        <div class="img">
          <img :src="commodit.img" alt="">
        </div>
        <div class="info">
          <p class="name">{{commodit.name}}</p>
          <p class="detail">{{commodit.detail}}</p>
          <p class="future">预售截止时间: 2022.06.30 07:00</p>
          <div class="flex">
            <div class="label">价格：</div>
            <div class="price">￥{{commodit.price}}</div>
          </div>
          <div class="flex">
            <div class="label">颜色：</div>
            <ul>
              <li @click="handleChoose(item)" :class="item==current ? 'color choose':'color'" v-for="(item,index) of colors" :key="index">
                {{item}}
              </li>
            </ul>
          </div>
          <div class="flex">
            <div class="label">数量</div>
             <el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number>
          </div>
          <div class="buy">
            <div @click="addCart(commodit)" class="btn add">
              <i class="iconfont cart icon-cart"></i>
              加入购物车
            </div>
            <div @click="add_go(commodit)" class="btn now">
              立即购买￥{{sum}}
            </div>
          </div>
          <p class="tips">本产品为定制产品，现货下单后1-3个工作日发货，预售按照标明的日期发货。</p>
          <div class="service">
            <p class="have">现货</p>
            <p class="with">正</p>
            <p class="with">港澳台</p>
            <img class="huabei" src="../../assets/images/huabei.jpg" alt="">
            <p class="provide">支持花呗</p>
          </div>
        </div>
      </div>
      <div class="about">
        <i class="iconfont title-logo icon-discount"></i>
        <p class="title">
          派送信息
        </p>
        <p class="text">
          本商品下单后2个工作日内发货；如遇节假日，发货时间可能顺延。
        </p>
      </div>
      <div class="about">
        <i class="iconfont title-logo icon-service"></i>
        <p class="title">
          常见问题
        </p>
        <ol class="question">
          <div v-for="item,index of about" :key="index">
            <li :class="item.isShow? 'down' : ''" @click="handleQuestion(index)">{{item.question}}</li>
            <div class="a-part" :style="item.isShow? 'display:block':'display:none'">
              <p class="answer">{{item.answer}}</p>
            </div>
          </div>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
import KeyboardHttp from '../../models/KeyboardHttp.js'
import Options from '../../components/Options'
export default {
  data() {
    return {
      commodit:[],
      colors:['黑色','红色','黄色','绿色','紫色','白色'],
      current:'黑色',
      num:1,
      about:[
        {
          question:"我们如何保障您的购物体验？",
          answer:"我们与每件商品的原厂或授权经销商直接合作，确保每一件商品都是正品，请放心购买。",
          isShow:false,
        },
        {
          question:"商品什么时候发货？",
          answer:"现货商品一般在付款后 48 小时内发货；如遇节假日，部分商品发货时间可能顺延。商品发货后，您可以在“我的订单”中查询快递单号，具体物流信息可参考相应快递公司官网。",
          isShow:false,
        },
        {
          question:"如何购买及付款方式？",
          answer:"您在平台商品展示页面挑选您所需商品或通过搜索选择您需要的商品点击购买，如您需购买多件商品，可将所需商品一并加入购物车内合并付款。如您需开发票，可以与官方客服联系。支持付款方式：微信支付、支付宝、 Paypal。",
          isShow:false,
        },
        {
          question:"如何取消订单？",
          answer:"您可以在商品发货前联系官方客服申请退款，已经发货订单待商家收到退回商品后处理退款。国际直通车及定制商品不支持无理由退换货。",
          isShow:false,
        },
        {
          question:"商品如何保修？",
          answer:"如在平台购买的商品遇描述不符、运输损坏、开封即损等情况，请在确认收货后7天内联系客服进行退换货 。商品保修以具体商品的原厂保修条款为准，现货商品保修事宜可凭订单号及质保证书或发票与官方售后或与官方客服联系处理，国际直通车及定制商品保修事宜可直接联系官方客服， 我们将为您提供最优质的商品和服务。",
          isShow:false,
        },
        {
          question:"关于退换货？",
          answer:"商品因质量问题发生退换货，运费由平台承担。因其他原因产生退换货，需要用户承担退换货产生的双向运费。商品收货时间以快递签收时间为准。",
          isShow:false,
        }
      ],
      data:false
    }
  },
  components:{
    Options
  },
  async mounted(){
    let id = this.$route.query.id
    var commodit = await KeyboardHttp.getDetail(id)
    this.commodit = commodit.data.res[0]
    document.title = commodit.data.res[0].name
  },
  methods:{
    handleChoose(item){
      this.current = item
    },
    handleQuestion(index){
      this.about[index].isShow = !this.about[index].isShow
    },
    add_go(commodit){
      this.addCart(commodit)
      this.$nextTick(this.$router.push('/cart'))
    }
  },
  computed:{
    sum(){
      return this.commodit.price * this.num
    }
  }
}
</script>

<style scoped>
  .bgfff{
    background-color: #fff;
    overflow: hidden;
  }
  .commodit-box{
    padding-top: 80px;
    display: flex;
    justify-content: space-around;
  }
  .img{
    margin-right: 100px;
  }
  .img>img{
    width: 600px;
    height: 412px;
  }
  .name{
    font-size: 27px;
    color: #000;
    margin-bottom: 5px
  }
  .detail{
    font-size: 14px;
    color: #a0a4b0;
    margin-bottom: 10px
  }
  .future{
    padding: 12px 18px;
    color: #1cb5b5;
    background: #e0f7fa;
    margin-top: 20px;
    font-size: 14px;
    margin: 20px 0;
  }
  .flex{
    display: flex;
    margin-bottom: 20px;
    /* align-items: center; */
  }
  .label{
    min-width: 84px;
    padding-right: 8px;
    color: #5d5d5d;
    line-height: 38px;
  }
  .price{
    font-size: 28px;
    font-weight: 700;
    color: #000;
  }
  .color{
    display: inline-block;
    margin: 10px;
    font-size: 14px;
    line-height: 36px;
    padding: 0 13px;
    border: 2px solid #e2e2e2;
    color: #555;
    box-sizing: border-box;
    max-width: 100%;
    cursor: pointer;
  }
  .choose{
    border: 2px solid #222 !important;
  }
  .btn{
    display: inline-block;
    width: 170px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    margin-right: 6px;
    border: 1px solid #000;
    cursor: pointer;
  }
  .btn:hover{
    box-shadow: 0 1px 7px -1px #bfceec;
  }
  .add{
    background: #f3f5fa;
    color: #000;
    border: 1px solid #f3f5fa;
  }
  .cart{
    font-weight: 800;
    font-size: 20px;
  }
  .now{
    background: #000;
    color: #fff;
    border: 1px solid #000;
  }
  .tips{
    margin: 10px 0;
    color: #6d7fa2;
    line-height: 1.8em;
    font-size: 12px;
  }
  .service{
    display: flex;
    /* justify-content: space-around; */
  }
  .service>p{
    margin-right: 5px;
    font-size: 14px;
  }
  .have{
    background-color: #000;
    color: #fff;
    padding: 5px 10px;
    font-weight: 800;
    border-radius: 5px;
  }
  .with{
    padding: 5px 5px;
    font-weight: 800;
    border-radius: 5px;
    color: #1cb5b5;
    border: 1px solid #1cb5b5;
  }
  .huabei{
    height: 28px;
  }
  .provide{
    padding: 5px 10px;
    font-weight: 800;
    color: #6d7fa2;
  }
  .about{
    width: 600px;
    margin: 0 0 30px 40px;
    position: relative;
  }
  .title{
    font-family: helvetica,sans-serif;
    font-weight: 700;
    margin: 30px 0 12px;
    padding: 0 0 3px;
    border-bottom: 1px solid #eff0f2;
    color: #3b3e42;
    font-size: 18px;
    line-height: 26px;
  }
  .title-logo{
    position: absolute;
    left: -34px;
    font-size: 25px;
  }
  .text{
    font-size: 14px;
    line-height: 1.8em;
    color: #515255;
  }
  .question{
    position: relative;
    font-size: 14px;
    font-weight: 700;
    list-style-type: decimal;
  }
  .question li{
    margin: 6px 0;
    cursor: pointer;
    color: #515255;
    font-size: 14px;
    line-height: 1.8em;
  }
  .question li::after{
    content: "";
    display: table;
    width: 0px;
    height: 0px;
    border-left: 6px solid white;
    border-right: 6px solid white; 
    border-top:  8px solid rgb(142, 142, 142);
    margin-left: 8px;
    display: inline-block;
    transform-origin: 50% 50%;
    transition: transform 0.2s ease 0s;
  }
  .question li:hover{
    color: #07121f;
  }
  .down::after{
    transform: rotate(180deg) !important;
  }
  .a-part{
    padding-bottom: 15px;
    /* display: none; */
  }
  .answer{
    line-height: 1.8em;
    color: #969698;
  }
</style>